<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的订单</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <style>
        .content-block {
            margin-top: 0.5rem;
            padding: 0;
        }

        li {
            list-style-type: none;
            background: rgba(255, 255, 255, 1);
        }

        img {
            margin-top: 0.5rem;
            height: 3.5rem;
            width: 3.5rem;
            float: left;
        }

        .goods-item {
            border-top: 0.05rem dashed rgba(238, 238, 238, 1);
        }

        .goodsInfo {
            padding-top: 0.5rem;
            height: 4rem;
            display: flex;
            flex-direction: column;
            margin-left: 4rem;
            justify-content: flex-start;
            background: rgba(255, 255, 255, 1);
        }

        .goodsName {
            height: 1.675rem;
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
            line-height: 0.98rem;
        }

        .salePrice {
            width: 6rem;
            height: 0.75rem;
            font-size: 0.8rem;
            font-family: MicrosoftYaHei;
            color: rgba(231, 37, 16, 1);
            line-height: 1.44rem;
        }

        .orgPrice {
            height: 0.45rem;
            font-size: 0.6rem;
            font-family: MicrosoftYaHei;
            color: rgba(153, 153, 153, 1);
            line-height: 1.5rem;
        }

        .num {
            height: 0.45rem;
            font-size: 0.6rem;
            font-family: MicrosoftYaHei;
            color: rgba(102, 102, 102, 1);
            line-height: 1.5rem;
        }

        .price {
            margin-top: 0.2rem;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .priceNum {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .option {
            border-top: 0.05rem solid rgba(238, 238, 238, 1);;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            background: rgba(255, 255, 255, 1);
            margin-bottom: 0.1rem;
        }

        .buttonInfo {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            border-bottom: 0.05rem solid rgba(238, 238, 238, 1);
        }

        .priceInfo {
            font-size: 0.1rem;
            align-self: flex-end;
        }
    </style>
</head>

<body>
<!-- 你的html代码 -->
<div class="page">
    <!--<header class="bar bar-nav">-->
    <!--<a class="button button-link button-nav pull-left" data-transition='slide-out'>-->
    <!--<span class="icon icon-left"></span>-->
    <!--返回-->
    <!--</a>-->
    <!--<h1 class="title">我的订单</h1>-->
    <!--</header>-->
    <nav class="bar bar-tab">
        <a class="tab-item" href="../index.html">
            <span class="icon icon-home"></span>
            <span class="tab-label">首页</span>
        </a>
        <a class="tab-item" href="../category.html">
            <span class="icon icon-menu"></span>
            <span class="tab-label">分类</span>
        </a>
        <a class="tab-item" href="../cart.html">
            <span class="icon icon-cart"></span>
            <span class="tab-label">购物车</span>
        </a>
        <a class="tab-item active" href="../personal.html">
            <span class="icon icon-me"></span>
            <span class="tab-label">我的</span>
        </a>
    </nav>
    <!-- 这里是页面内容区 -->
    <div class="content">
        <div class="buttons-tab">
            <a href="#all" class="tab-link active button">全部</a>
            <a href="#waitPay" class="tab-link button">待付款</a>
            <a href="#waitShip" class="tab-link button">待发货</a>
            <a href="#waitReceipt" class="tab-link button">待收货</a>
        </div>
        <div class="content-block">
            <div class="tabs">
                <div id="all" class="tab active">
                    <div class="content-block">
                        <li class="goods-item">
                            <div class="goodsImg">
                                <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg">
                            </div>
                            <div class="goodsInfo">
                                <span class="goodsName">dgzswg反对很喜欢大幅下降反光相机分割成</span>
                                <div class="price">
                                    <span class="salePrice">￥299.00</span>
                                    <span class="orgPrice">￥299.00</span>
                                    <span class="num">x1</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="option">
                                <div class="priceInfo">共1件商品 合计:￥369.00
                                    <span>(含运费￥0.00)</span>
                                </div>
                                <div class="buttonInfo">
                                    <p>
                                        <a href="#" class="button button-fill button-danger">取消订单</a>
                                    </p>&nbsp;&nbsp;&nbsp;
                                    <p>
                                        <a href="#" class="button button-fill button-success">付款 </a>
                                    </p>
                                </div>
                            </div>
                        </li>
                    </div>
                </div>

                <div id="waitPay" class="tab">
                    <div class="content-block">
                        <li>
                            <div>
                                <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg">
                            </div>
                            <div class="goodsInfo">
                                <span class="goodsName">光相机分割成</span>
                                <div class="price">
                                    <span class="salePrice">￥299.00</span>
                                    <span class="orgPrice">￥299.00</span>
                                    <span class="num">x1</span>
                                </div>
                            </div>
                        <li>
                        <li>
                            <div class="option">
                                <div class="priceInfo">共1件商品 合计:￥369.00
                                    <span>(含运费￥0.00)</span>
                                </div>
                                <div class="buttonInfo">
                                    <p>
                                        <a href="#" class="button button-fill button-danger">取消订单</a>
                                    </p>&nbsp;&nbsp;&nbsp;
                                    <p>
                                        <a href="#" class="button button-fill button-success">付款 </a>
                                    </p>
                                </div>
                            </div>
                        </li>
                    </div>
                </div>
                <div id="waitShip" class="tab">
                    <div class="content-block">
                        <li>
                            <div>
                                <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg">
                            </div>
                            <div class="goodsInfo">
                                <span class="goodsName">光相机分割成</span>
                                <div class="price">
                                    <span class="salePrice">￥299.00</span>
                                    <span class="orgPrice">￥299.00</span>
                                    <span class="num">x1</span>
                                </div>
                            </div>
                        <li>
                        <li>
                            <div>
                                <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg">
                            </div>
                            <div class="goodsInfo">
                                <span class="goodsName">光相机分割成</span>
                                <div class="price">
                                    <span class="salePrice">￥299.00</span>
                                    <span class="orgPrice">￥299.00</span>
                                    <span class="num">x1</span>
                                </div>
                            </div>
                        <li>
                        <li>
                            <div class="option">
                                <div class="priceInfo">共1件商品 合计:￥369.00
                                    <span>(含运费￥0.00)</span>
                                </div>
                                <div class="buttonInfo">
                                    <p>
                                        <a href="#" class="button button-fill button-danger">取消订单</a>
                                    </p>&nbsp;&nbsp;&nbsp;
                                    <p>
                                        <a href="#" class="button button-fill button-success">付款 </a>
                                    </p>
                                </div>
                            </div>
                        </li>
                    </div>
                </div>
                <div id="waitReceipt" class="tab">
                    <div class="content-block">
                        <li>
                            <div>
                                <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg">
                            </div>
                            <div class="goodsInfo">
                                <span class="goodsName">光相机分割成</span>
                                <div class="price">
                                    <span class="salePrice">￥299.00</span>
                                    <span class="orgPrice">￥299.00</span>
                                    <span class="num">x1</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="option">
                                <div class="priceInfo">共1件商品 合计:￥369.00
                                    <span>(含运费￥0.00)</span>
                                </div>
                                <div class="buttonInfo">
                                    <p>
                                        <a href="#" class="button button-fill button-danger">取消订单</a>
                                    </p>&nbsp;&nbsp;&nbsp;
                                    <p>
                                        <a href="#" class="button button-fill button-success">付款 </a>
                                    </p>
                                </div>
                            </div>
                        </li>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://res.wx.qq.com/open/js/jweixin-1.2.0.js' charset='utf-8'></script>
<script src="../js/index.js"></script>
</body>
<script>
    $(function () {
        getOrderByStatus(-1);
        var url = encodeURIComponent(location.href.split('#')[0]);
        $.getJSON("/wx/api/getJsApi?url=" + url, function (data) {
            appId = data.data.appId;
            nonceStr = data.data.nonceStr;
            signature = data.data.signature;
            timestamp = data.data.timestamp;
            wx.config({
                //debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: appId, // 必填，公众号的唯一标识
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: nonceStr, // 必填，生成签名的随机串
                signature: signature,// 必填，签名
                jsApiList: ['getLocation', 'chooseWXPay'] // 必填，需要使用的JS接口列表
            });
        });
    });
    var userId = "1";

    function getOrderByStatus(status) {
        $.getJSON(prefix + "/orderInfo/api/getOrderByStatus/" + status, function (data) {
            var order = data.data;
            var itemHtml = "";
            var waitPayHtml = "";
            var waitShip = "";
            var waiReceive = "";
            if (data.code === 0) {
                $.each(order, function (index, item) {
                    if(item.orderItemList.length == 0){
                        return;
                    }
                    if (item.flStatus == 0) {
                        //待支付
                        var orderItem = item.orderItemList;
                        var goodsNum = 0;
                        var totalPrice = 0.0;
                        $.each(orderItem, function (index, item) {
                            goodsNum = goodsNum + 1;
                            totalPrice = totalPrice + item.flSubtotal;
                            waitPayHtml += '<li class="goods-item">' +
                                '<div class="goodsImg">' +
                                '<img src="' + item.flThumbnail + '">' +
                                '</div>' +
                                '<div class="goodsInfo">' +
                                '<span class="goodsName">' + item.flName + '</span>' +
                                '<div class="price">' +
                                '<span class="salePrice">￥' + item.flPrice + '</span>' +
                                '<span class="orgPrice">￥' + item.flOrgPrice + '</span>' +
                                '<span class="num">x' + item.flQuantity + '</span>' +
                                '</div>' +
                                '</div>' +
                                '</li>';
                        });
                        waitPayHtml = waitPayHtml + '<li>' +
                            '<div class="option">' +
                            '<div class="priceInfo">共' + goodsNum + '件商品 合计:￥' + totalPrice +
                            '<span>(含运费￥0.00)</span>' +
                            '</div>' +
                            '<div class="buttonInfo">' +
                            '<p>' +
                            '<a href="#" class="button button-fill button-danger" onclick="closeOrder(\'' + item.flId + '\')">取消订单</a>' +
                            '</p>&nbsp;&nbsp;&nbsp;' +
                            '<p>' +
                            '<a href="#" class="button button-fill button-success" onclick="payment(\'' + item.flId + '\')">付款 </a>' +
                            '</p>' +
                            '</div>' +
                            '</div>' +
                            '</li>';

                    } else if (item.flStatus == 1) {
                        //待发货
                        var orderItem = item.orderItemList;
                        var goodsNum = 0;
                        var totalPrice = 0.0;
                        $.each(orderItem, function (index, item) {

                            goodsNum = goodsNum + 1;
                            totalPrice = totalPrice + item.flSubtotal;
                            waitShip += '<li class="goods-item">' +
                                '<div class="goodsImg">' +
                                '<img src="' + item.flThumbnail + '">' +
                                '</div>' +
                                '<div class="goodsInfo">' +
                                '<span class="goodsName">' + item.flName + '</span>' +
                                '<div class="price">' +
                                '<span class="salePrice">￥' + item.flPrice + '</span>' +
                                '<span class="orgPrice">￥' + item.flOrgPrice + '</span>' +
                                '<span class="num">x' + item.flQuantity + '</span>' +
                                '</div>' +
                                '</div>' +
                                '</li>';
                        });
                        waitShip = waitShip + '<li>' +
                            '<div class="option">' +
                            '<div class="priceInfo">共' + goodsNum + '件商品 合计:￥' + totalPrice +
                            '<span>(含运费￥0.00)</span>' +
                            '</div>' +
                            '<div class="buttonInfo">' +
                            '<p>' +
                            '<a href="#" class="button button-fill button-danger" onclick="closeOrder(\'' + item.flId + '\')">取消订单</a>' +
                            '</p>&nbsp;&nbsp;&nbsp;' +
                            '<p>' +
                            '<a href="#" class="button button-fill button-success" onclick="tipsShip(\'' + item.flId + '\')">提醒发货 </a>' +
                            '</p>' +
                            '</div>' +
                            '</div>' +
                            '</li>';

                    } else if (item.flStatus == 2) {
                        //待收货
                        var orderItem = item.orderItemList;
                        var goodsNum = 0;
                        var totalPrice = 0.0;
                        $.each(orderItem, function (index, item) {
                            goodsNum = goodsNum + 1;
                            totalPrice = totalPrice + item.flSubtotal;
                            waiReceive += '<li class="goods-item">' +
                                '<div class="goodsImg">' +
                                '<img src="' + item.flThumbnail + '">' +
                                '</div>' +
                                '<div class="goodsInfo">' +
                                '<span class="goodsName">' + item.flName + '</span>' +
                                '<div class="price">' +
                                '<span class="salePrice">￥' + item.flPrice + '</span>' +
                                '<span class="orgPrice">￥' + item.flOrgPrice + '</span>' +
                                '<span class="num">x' + item.flQuantity + '</span>' +
                                '</div>' +
                                '</div>' +
                                '</li>';
                        });
                        waiReceive = waiReceive + '<li>' +
                            '<div class="option">' +
                            '<div class="priceInfo">共' + goodsNum + '件商品 合计:￥' + totalPrice +
                            '<span>(含运费￥0.00)</span>' +
                            '</div>' +
                            '<div class="buttonInfo">' +
                            '<p>' +
                            '<a href="#" class="button button-fill button-danger" onclick="confirmReceipt(\'' + item.flId + '\')">取人收货</a>' +
                            '</p>&nbsp;&nbsp;&nbsp;' +
                            '<p>' +
                            '<a href="#" class="button button-fill button-success" onclick="viewExpress(\'' + item.flId + '\')">查看物流 </a>' +
                            '</p>' +
                            '</div>' +
                            '</div>' +
                            '</li>';

                    }
                });
                /*<a href="#waitPay" class="tab-link button">待付款</a>0
                <a href="#waitShip" class="tab-link button">待发货</a>1
                <a href="#waitReceipt" class="tab-link button">待收货</a>2*/
                $("#waitPay .content-block").html(waitPayHtml);
                $("#waitShip .content-block").html(waitShip);
                $("#waitReceipt .content-block").html(waiReceive);
                $("#all .content-block").html(waitPayHtml + waitShip + waiReceive);

            }
        })
    }

    /**
     * 取消订单
     */
    function closeOrder(id) {
        alert("closeOrder" + id)
    }

    /**
     * 支付
     */
    function payment(id) {
        $.post(prefix + "/orderInfo/api/orderPayment", {
            'orderId': id
        }, function (data) {
            console.log(data);
            data = JSON.parse(data);
            if (data.code === 0) {
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', {
                        "appId": data.data.appId, //公众号名称，由商户传入
                        "timeStamp": data.data.timeStamp, //时间戳，自1970年以来的秒数
                        "nonceStr": data.data.nonceStr, //随机串
                        "package": data.data.package,
                        "signType": data.data.signType, //微信签名方式：
                        "paySign": data.data.sign //微信签名
                    },function (res) {
                        //                    get_brand_wcpay_request:ok	支付成功
                        //                    get_brand_wcpay_request:cancel	支付过程中用户取消
                        //                    get_brand_wcpay_request:fail	支付失败
                        //                    调用支付JSAPI缺少参数：total_fee	请检查预支付会话标识prepay_id是否已失效
                        if (res.err_msg === "get_brand_wcpay_request:ok") {
                            $.alert("支付成功");
                            window.location.href = "../index.html?q=paySuccess";
                        } else if (res.err_msg === "get_brand_wcpay_request:cancel") {
                            $.alert("取消支付");
                        } else if (res.err_msg === "get_brand_wcpay_request:fail") {
                            $.alert("支付失败");
                        }

                    });
            }
        });
    }

    /**
     * 查看物流
     */
    function viewExpress(id) {
        alert("viewExpress" + id)
    }

    /**
     * 提醒发货
     */
    function tipsShip(id) {
        alert("tipsShip" + id)
    }

    /**
     * 确认收货
     */
    function confirmReceipt(id) {

    }

</script>

</html>
